<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片浏览</title>
	<style>
		body{
			margin-top: 63px;
			margin-left: 300px;
			background-color: black;
		}
		ul{
			list-style: none;
			margin-top: 0;
		}
		li{
			float: left;
		}
		#left{
			width: 800px;
			height: 255px;
		}
		#right{
			height: 255px;
			width: 800px;
		}
	</style>
</head>
<body>
	<div id="left">
		<ul>
			<li><img src="淘宝服饰浏览/冬裙.jpg" alt=""></li>
			<li><img src="淘宝服饰浏览/呢大衣.jpg" alt=""></li>
			<li><img src="淘宝服饰浏览/围巾.jpg" alt=""></li>
		</ul>
	</div>
		
	<div id="right">
		<ul>
			<li><img src="淘宝服饰浏览/女裤.jpg" alt=""></li>
			<li><img src="淘宝服饰浏览/毛衣.jpg" alt=""></li>
			<li><img src="淘宝服饰浏览/女包.jpg" alt=""></li>
		</ul>
	</div>
	<script>
		var lis=document.querySelectorAll('li');

		for (var i = 0; i < lis.length; i++) {
			lis[i].index=i;
			lis[i].onmouseover=function(argument) {
				for (var j = 0; j < lis.length; j++) {
					lis[j].style='opacity:0.3';
				}
				this.style='opacity:1';
			}
			lis[i].onmouseout=function(){
				for (var i = 0; i < lis.length; i++) {
					lis[i].style='opacity:1';
				}
			}
		}
	</script>
</body>
</html>